<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>直邮制作工具</title>
	<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';">
	<link rel="stylesheet" href="/src/modules/css/index.css">
</head>

<body class="center">
	<h1 class="logo">直邮制作工具</h1>

	<div class="upload_container hide">
		<label class="center" id="dropBox" for="upload">
			<p>拖拽图片到这里或点击此区域</p>
			<span class="subtext">单张≤20MB的图片，格式为PNG或JPEG</span>
		</label>
		<input type="file" id="upload" placeholder="上传">
	</div>

	<div class="clip_container">
		<div class="clip_left">
			<div class="ruler_area top_area" id="topArea"></div>
			<div class="scroll_box">
				<div class="canvas_box">
					<canvas id="clipCanvas" width="800" height="1600"></canvas>
				</div>
			</div>
			<div class="ruler_area left_area" id="leftArea"></div>
		</div>

		<div class="clip_right_menu" id="rightMenu">
			<div class="edit_box">
				页面标题：
				<label for="radio2">
					<input type="radio" name="title" id="radio2">
					《天龙八部》官方网站
				</label>
				<label for="radio1">
					<input type="radio" name="title" id="radio1">
					《天龙八部》怀旧官方网站
				</label>
				<label for="radio3">
					<input type="radio" name="title" id="radio3">
					<input type="text" placeholder="自定义标题" id="title" onclick="selectRadio()" onfocus="selectRadio()">
				</label>
			</div>

			<span class="btn" id="reset">重置</span>
			<span class="btn" id="export">确认导出</span>
			<span class="btn" id="restart">重新选择图片</span>

			<details open>
				<summary>使用说明</summary>
				<ol>
					<li class="subtext">在标尺区域点击或拖拽即可新建辅助线</li>
					<li class="subtext">右键辅助线即可删除</li>
					<li class="subtext">右键标记区域开始编辑</li>
				</ol>
			  </details>
		</div>
	</div>

	<script type="module" src="/src/renderer.js"></script>
	<script>
		// 写一些页面的基础功能实现

		/**
		 *	配合实现点击输入框时候给单选框选中状态
		 */
		function selectRadio() {
			var radio = document.getElementById('radio3');
			radio.checked = true;
		}
	</script>
</body>

</html>
